<template>
  <div class="indexBar">
    <div class="divBox">
      <van-nav-bar title="机场专区" left-arrow @click-left="onClickLeft" />
      <div class="problem">
        <input v-model="problem" type="text" placeholder="输入机场名称"/>
        <van-icon name="search" @click="submit" />
      </div>
      <van-tabs v-model="active">
        <van-tab :title="item.title" v-for="(item,index) in airport_list" :key="index">
          <van-index-bar>
            <van-index-anchor :index="v.index" v-for="(v,i) in item.details" :key="i">
            <van-cell :title="m.title"  v-for="(m,n) in v.portlist" :key="n"/>
            </van-index-anchor>
          </van-index-bar>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'indexBar',
  data(){
    return{
      problem:'',
      active:'',
      airport_list:[
        {id:1,title:'国内',details:[{id:11,index:'A',portlist:[{id:111,title:'阿尔山伊尔施YIE'},{id:112,title:'阿克苏AKU'},{id:113,title:'阿拉善右旗RHT'},{id:114,title:'阿拉善左旗AXF'},{id:115,title:'阿泰勒AAT'},{id:116,title:'阿里昆莎NGQ'},{id:117,title:'安康富强AKA'},{id:117,title:'安庆天柱山'},{id:119,title:'鞍山腾鳌AOG'}]},{id:12,index:'B',portlist:[{id:121,title:'巴彦淖尔天吉泰RLK'},{id:122,title:'巴中恩阳BZX'},{id:123,title:'白城长安DBC'},{id:124,title:'百色巴马AEB'},]},{id:13,index:'C',portlist:[{id:131,title:'沧源佤山CWJ'},{id:132,title:'长春龙嘉CGQ'},{id:133,title:'长春榆树通用YSR'},{id:134,title:'常德桃花源CGD'},]},{id:14,index:'D',portlist:[{id:141,title:'大理荒草坝DLU'},{id:142,title:'大连长海CNI'},{id:143,title:'大连周水子DLC'},{id:144,title:'大庆萨尔图DQA'},]},{id:15,index:'E',portlist:[{id:151,title:'鄂尔多斯伊金霍洛DSN'},{id:152,title:'额济纳旗桃来EJN'},{id:153,title:'恩施许家坪ENH'},{id:154,title:'二连浩特赛乌苏ERL'},]},{id:16,index:'F',portlist:[{id:161,title:'佛山沙提FUO'},{id:162,title:'阜阳西关FUG'},{id:163,title:'抚远东极FYJ'},{id:164,title:'富蕴可可托海FYN'},]},{id:17,index:'G',portlist:[{id:171,title:'甘肃夏河GXH'},{id:172,title:'赣州黄金KOW'},{id:173,title:'甘孜格萨尔GZG'},{id:174,title:'甘孜康定KGT'},]},]},
        {id:2,title:'国际港澳台',details:[{id:21,index:'A',portlist:[{id:211,title:'阿帕拉契科拉市AAF'},{id:212,title:'阿比让国际ABJ'},{id:213,title:'阿布辛拜勒ABS'},{id:214,title:'阿布扎比AUH'},{id:215,title:'阿达姆普尔AIP'},{id:216,title:'阿德莱德ADL'},{id:217,title:'阿德莫尔市ADM'},{id:218,title:'阿尔伯克基ABQ'},{id:219,title:'阿尔皮纳APN'}]},{id:22,index:'B',portlist:[{id:221,title:'巴彦淖尔天吉泰RLK'},{id:222,title:'巴中恩阳BZX'},{id:223,title:'白城长安DBC'},{id:224,title:'百色巴马AEB'},]},{id:23,index:'C',portlist:[{id:231,title:'沧源佤山CWJ'},{id:232,title:'长春龙嘉CGQ'},{id:233,title:'长春榆树通用YSR'},{id:234,title:'常德桃花源CGD'},]},{id:24,index:'D',portlist:[{id:241,title:'大理荒草坝DLU'},{id:242,title:'大连长海CNI'},{id:243,title:'大连周水子DLC'},{id:244,title:'大庆萨尔图DQA'},]},{id:25,index:'E',portlist:[{id:251,title:'鄂尔多斯伊金霍洛DSN'},{id:252,title:'额济纳旗桃来EJN'},{id:253,title:'恩施许家坪ENH'},{id:254,title:'二连浩特赛乌苏ERL'},]},{id:26,index:'F',portlist:[{id:261,title:'佛山沙提FUO'},{id:262,title:'阜阳西关FUG'},{id:263,title:'抚远东极FYJ'},{id:264,title:'富蕴可可托海FYN'},]},{id:27,index:'G',portlist:[{id:271,title:'甘肃夏河GXH'},{id:272,title:'赣州黄金KOW'},{id:273,title:'甘孜格萨尔GZG'},{id:274,title:'甘孜康定KGT'},]},]},
      ],
    }
  },
  created(){

  },
  methods:{
    onClickLeft(){
      this.$router.go(-1)
    },
    submit(){
      this.$message({
          message: '发送成功',
          type: 'success'
        });
      this.problem = ''
    }
  }
} 
</script>

<style scoped>
.divBox{
    width: 350px;
    /* background-color: #fff; */
    border-radius: 5px;
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    margin-right: 4px;
}
.indexBar{
  width: 100%;
  background-color: #fff;
}
.van-tabs{
  width: 100%;
  margin: 60px 0;
}
.problem{
  position: fixed;
  top: 10px;
  width: 355px;
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  z-index: 2;
  margin-top: 25px;
}
.problem input{
  width: 275px;
  background-color: #f5f6f8;
  border-radius: 20px;
  height: 40px;
  margin: 10px 0 10px 10px;
  border: none;
  padding-left: 20px;
}
.van-icon{
  font-size: 12px;
  color: #cccccc;
  font-size: 40px;
  margin-top: 10px;
}

</style>
